<template>
  <section>
    <el-dialog title="选择入口" :visible.sync="show" :center="true"
               :close-on-press-escape="false" :close-on-click-modal="false">
      <el-row class="dialogRow" v-if="loading" v-loading="loading"
              :element-loading-text="'前往：'+selDepartments.name"
              element-loading-spinner="el-icon-loading">
      </el-row>
      <el-row class="dialogRow" v-else>
        <el-form label-width="80px" size="mini">
          <el-form-item label="公司">
            <el-select v-model="selCompany" placeholder="请选择" size="mini" value-key="id">
              <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="selDepartments" placeholder="请选择" size="mini" value-key="id">
              <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  //后续添加属性，需要vue联动
  export default {
    name: "selDepartment",
    data(){
      return {
        loading:false,
        selCompany:null,
        companies:[],
        departments:[],
        selDepartments:null,
        show:true,
        redirect:'/index'
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    mounted() {
      // 看下有没有信息
      console.log(this.department)
    },
    watch:{
      selCompany(nv,ov){
        console.log(nv)
        if(nv) this.getDepartmentList(nv.id)
      },
      selDepartments(nv,ov){
        this.loading=true
        setTimeout(()=>{
          this.setDepartment({department:nv,cb:()=>{
              //路由
              this.$router.push(this.redirect)
            }
          })
        },2000)
      }
    },
    created(){
      console.log(this.department)
      console.log(this.$route.query)
      if (this.$route.query.redirect){
        this.redirect = this.$route.query.redirect
        console.log(this.redirect)
      }
      //获取登录用户信息
      this.getSelfInfo()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      ...mapMutations({
        setDepartment: 'setDepartment'
      }),
      getSelfInfo(){
        this.fetch({name:"getSelfInfo"})
          .then(res=>{
            console.log('—用户信息———————————————————————',res)
            //判断公司资源
            this.judgCompany(res.companies)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      judgCompany(c){
        console.log(c)
        if(c && c.length >= 0){
          this.departments = []
          if(c.length === 1){
            console.log('只有一个公司资源')
            this.getDepartmentList(c[0])
          }else{
            console.log('有多个公司资源，需要选择')
            this.getCompanyList(c)
          }
        }else {
          this.$message('您没有公司权限，即将退出……')
        }
      },
      getDepartmentList(companyId){
        this.fetch({name:"getDepartmentList",data:{companyId}})
          .then(res=>{
            console.log('公司下部门列表------',res)
            if(res.length ===1){
              console.log('该公司下只有一个部门，直接进入')
              this.selDepartments=res[0]
            }else if(res.length >1){
              console.log('该公司下有多个部门，需要选择')
              this.companies.push({companyName:res.companyName,id:res.companyId})
              // this.selCompany=this.companies[0]
              this.departments=res
            }else {
              console.log('该公司下没有部门，退出')
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getCompanyList(c){
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            if(res && res.length >= 0){
              this.companies = []
              for(let i=0;i<c.length;i++){
                let id = c[i]
                let r = res.find(r => r.id === id)
                this.companies.push(r)
              }
            }
            console.log(this.companies)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>
.dialogRow{
  min-height: 100px;
}
</style>
